<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>现代风格弹窗组件</title>
    <link rel="stylesheet" href="styles/style.css">
    <link rel="stylesheet" href="styles/alert.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <!-- 装饰元素 -->
    <div class="decoration circle"></div>
    <div class="decoration circle"></div>
    <div class="decoration circle"></div>
    
    <!-- 主内容区域 -->
    <div class="my-content">
        <h1>弹窗组件演示</h1>
        
        <div class="button-grid">
            <button onclick="showAlert('success', '示例', '这是一个基本弹窗')">
                <i class="fas fa-window-restore button-icon"></i> 测试弹窗
            </button>
            
            <button onclick="showAdvancedAlert({
                type: 'question',
                title: '高级示例',
                content: '这是一个高级弹窗',
                buttons: [
                    { text: '取消', value: false },
                    { text: '确认', value: true }
                ],
                callback: (result) => console.log(result)
            })">
                <i class="fas fa-cog button-icon"></i> 测试高级弹窗
            </button>
            
            <button onclick="showAdvancedAlert({
                type: 'warning',
                title: '警告',
                content: '这是一个警告弹窗',
                buttons: [
                    { text: '取消', value: false },
                    { text: '确认', value: true }
                ]
            })">
                <i class="fas fa-exclamation-triangle button-icon"></i> 测试警告弹窗
            </button>
            
            <button onclick="showAdvancedAlert({
                type: 'info',
                title: '请选择操作',
                content: '您想如何处理这个文件？',
                buttons: [
                    { text: '查看', value: 'view', class: 'btn-info' },
                    { text: '下载', value: 'download', class: 'btn-primary' },
                    { text: '分享', value: 'share', class: 'btn-success' },
                    { text: '取消', value: false, class: 'btn-cancel' }
                ],
                callback: (choice) => {
                    const actions = {
                        view: () => showAlert('info', '查看', '正在打开文件查看器...'),
                        download: () => showAlert('success', '下载', '文件下载已开始...'),
                        share: () => showAlert('info', '分享', '打开分享选项...')
                    };
                    
                    if (choice && actions[choice]) {
                        actions[choice]();
                        console.log(`${choice} 已执行`);
                    } else {
                        showAlert('info', '已取消', '没有执行任何操作');
                        console.log('已取消');
                    }
                }
            })">
                <i class="fas fa-list-ul button-icon"></i> 多选项弹窗
            </button>
            
            <button onclick="showAlert('info', '每日一言', `${yiyan}`)" class="btn btn-error">
                <i class="fas fa-quote-right button-icon"></i> 每日一言
            </button>
            <button onclick="showAdvancedAlert({
                type: 'info',
                title: '示例',
                content: '你确定要进入示例页面吗？',
                buttons: [
                    { text: '是', value: true, class: 'btn-primary' },
                    { text: '否', value: false, class: 'btn-cancel' }
                ],
                callback: (choice) => {
                    if (choice) {
                        window.location.href = 'example.html';
                    }
                    else {
                        showAlert('info', '已取消', '没有进入示例页面');
                    }
                }
            })">
                <i class="fas fa-external-link-alt button-icon"></i> 转到示例页
            </button>
        </div>
    </div>
    
    <!-- 弹窗结构 -->
    <div class="ua-container" id="alertContainer">
        <div class="ua-box">
            <div class="ua-header">
                <div class="ua-icon" id="alertIcon"></div>
                <h3 class="ua-title" id="alertTitle">标题</h3>
            </div>
            <div class="ua-content" id="alertContent">内容</div>
            <div class="ua-buttons" id="alertButtons">
                <button class="ua-button">确定</button>
            </div>
        </div>
    </div>
    
    <!-- 页脚 -->
    <div class="footer">
        现代弹窗组件 | 设计：小钻风的蛇作演讲
    </div>
    
    <!-- JavaScript文件 -->
    <script src="scripts/alert.js"></script>
    <script src="scripts/yiyan.js"></script>
</body>
</html>